<template>
    <section>
	<tab></tab>
	<div class="shiwu">

		<div class="shiwu_left"><!--左边栏-->
			<el-menu
		      default-active="1"
		      class="el-menu-vertical-demo"
		      >
		      <el-submenu :index="String(index)" :key="index" v-for="(item,index) in leftMenu">
		        <template slot="title">
		          <!--<i class="el-icon-location"></i>-->
		          <span>{{item.name}}</span>
		        </template>
		        <el-menu-item-group :key="childIndex" v-for="(childItem,childIndex) in item.childMenu">
		          <el-menu-item :index="String(childIndex)">
		          	{{childItem.childName}}
		          </el-menu-item>
		        </el-menu-item-group>
		      </el-submenu>
		    </el-menu>
		</div>


		<div class="shiwu_right"><!--右边栏-->
			 <el-tabs v-model="rightActiveName" >
			    <el-tab-pane label="办公设备" name="first" value='01' >
					<form-panel :formData = "formData"></form-panel>
					<div style="width: 100%;height: 1px;background: #d7d7d7;"></div>
					<table-panel :page="page" :tableLabel="tableLabel" :tableData="tableData"></table-panel>
			    </el-tab-pane>
			    <el-tab-pane label="设备申请列表" name="second" value='02' >
			    </el-tab-pane>
			 </el-tabs>
		</div>
	</div>
    </section>
</template>

<script>
	import tab from '@/components/tab'
	import formPanel from '@/components/formPanel'
	import tablePanel from '@/components/tablePanel'
    export default {
    	components:{
    		tab,
    		formPanel,
    		tablePanel
    	},
        data() {
          return {
          		page:{
          			total:1000,
          			size:100,
          		},
          		rightActiveName:'first',
				leftMenu:[
					{
						name:'会议室预定',
						childMenu:[

						]
					},
					{
						name:'物品领用',
						childMenu:[

						]
					},
					{
						name:'设备管理',
						childMenu:[
							{
								childName:'设备管理',
								childval:1
							},
							{
								childName:'入库管理',
								childval:2
							},
							{
								childName:'出库管理',
								childval:3
							},
							{
								childName:'迁移管理',
								childval:4
							},
							{
								childName:'维修管理',
								childval:5
							},
							{
								childName:'查询管理',
								childval:6
							},
							{
								childName:'数据维护',
								childval:7
							},
						]
					},
					{
						name:'报账查询',
						childMenu:[

						]
					},
				],
				formData:[/*form表单的数据*/
			        {
			          label : '存放库房',
			          type : 'select',
			          modelData : '',
			          options : [
			            {
			              label : '222',
			              code : '222'
			            },
			            {
			              label : '3333',
			              code : '333'
			            }
			          ],
			        },
			        {
			          label : '设备编号',
			          type : 'input',
			          modelData : '',
			        },
			        {
			          label : '设备类型',
			          type : 'select',
			          modelData : '',
			          options : [
			            {
			              label : '222',
			              code : '222'
			            },
			            {
			              label : '3333',
			              code : '333'
			            }
			          ],
			        },
			        {
			          label : '设备名称',
			          type : 'input',
			          modelData : '',
			        },
			        {
			          label : '品牌',
			          type : 'select',
			          modelData : '',
			          options : [
			            {
			              label : '2222',
			              code : '2222'
			            },
			            {
			              label : '333',
			              code : '33333'
			            }
			          ],
			        },
			        {
			          label : '型号',
			          type : 'select',
			          modelData : '',
			          options : [
			            {
			              label : '2222',
			              code : '2222'
			            },
			            {
			              label : '333',
			              code : '33333'
			            }
			          ],
			        },
			        {
			          label : '出库/入库时间',
			          type : 'daterange',
			          modelData : '',
			        },
			       	{
			          label : '出库/入库经办人',
			          type : 'select',
			          modelData : '',
			          options : [
			            {
			              label : '2222',
			              code : '2222'
			            },
			            {
			              label : '333',
			              code : '33333'
			            }
			          ],
			        },
			    ],
			    tableData:[/*table表格数据*/
			     	{
			          name : '1213123132123123',
			          identify : '类型1',
			          address : '办公椅',
			          persontype : '晨光',
			          managelevel : '胡忆芳',
			          management : '1周',
			          activetime : '2018-05-05',
			        },
			        {
			          name : '1213123132123123',
			          identify : '类型1',
			          address : '办公椅',
			          persontype : '晨光',
			          managelevel : '胡忆芳',
			          management : '1周',
			          activetime : '2018-05-05',
			        },
			        {
			          name : '1213123132123123',
			          identify : '类型1',
			          address : '办公椅',
			          persontype : '晨光',
			          managelevel : '胡忆芳',
			          management : '1周',
			          activetime : '2018-05-05',
			        },
			        {
			          name : '1213123132123123',
			          identify : '类型1',
			          address : '办公椅',
			          persontype : '晨光',
			          managelevel : '胡忆芳',
			          management : '1周',
			          activetime : '2018-05-05',
			        },
			        {
			          name : '1213123132123123',
			          identify : '类型1',
			          address : '办公椅',
			          persontype : '晨光',
			          managelevel : '胡忆芳',
			          management : '1周',
			          activetime : '2018-05-05',
			        },
			        {
			          name : '1213123132123123',
			          identify : '类型1',
			          address : '办公椅',
			          persontype : '晨光',
			          managelevel : '胡忆芳',
			          management : '1周',
			          activetime : '2018-05-05',
			        },

			    ],
			    tableLabel:{/*table表头文字*/
			    	   	name : '设备编号',
				        identify : '资产类型',
				        address : '资产名称',
				        persontype : '品牌',
				        managelevel : '型号',
				        management : '序列号',
				        activetime : '资产状态',
			    },

          };
        },
        methods: {

        }
  };
</script>

<style >
	.shiwu .form_wappers,.count,.table_wappers {
	  width: 80%;
	  min-width: 1200px;
	  margin: 0 auto;
	}
	.shiwu .form_wappers {
	  padding: 12px;
	  background-color: #eee;
	  display: flex;
	  justify-content: flex-start;
	  flex-wrap: wrap;
	}
	.shiwu .topTab{
		width: 98%;
		margin: 10px auto;
		background: #FFFFFF;
	}
	.shiwu{
		width: 98%;
		margin: 10px auto;
		/*background: #FFFFFF;*/
	}
	.shiwu .shiwu_left{
		width: 200px;
		float: left;
	}
	.shiwu .shiwu_right{
		    width: calc(100% - 230px);
		    margin-left: 210px;
		    padding: 0 10px 0 10px;
		    background: #fff;
	}
	.shiwu .el-menu-item.is-active{
		color: #125AD2;
		border-left:3px solid #125AD2;
		background: #ecf5ff;
	}
	.shiwu .shiwu_right .el-tabs__item.is-active{
		color: #125AD2;
	}
	.shiwu .shiwu_right .el-tabs__active-bar{
		background-color: #125AD2;
	}
	
	.shiwu .el-tabs__nav-wrap::after{
		height: 1px;
    	background-color: #d1d1d1;
	}
	
	.shiwu .el-button--info{
		    background-color: #BBBBBB;
    		border-color: #BBBBBB;
	}
	.shiwu .el-button--primary{
		background-color: #97c3fc;
    	border-color: #97c3fc;
	}
	.shiwu .shiwu_right{
		padding-bottom: 15px;
	}
	
	.shiwu .el-table--fit{
		margin-bottom: 15px;
	}
	
	.shiwu .el-table td{
		border-bottom: unset;
	}
</style>
